import React, { Component } from 'react';
import { BrowserRouter, HashRouter, Route, Switch, Redirect, NavLink } from 'react-router-dom'
import Login from './pages/Login'
import Classify from './pages/Classify'
import List from './pages/List'
import Detail from './pages/Detail'
// 1. 路由模式
//  1-1 BrowserRouter history 
//  1-2 HashRouter    hash 为了兼容老的浏览器 
//      所有路由的组件 必须被上面两种模式包裹

// 2. Route 模糊匹配
//     path： 匹配当前地址栏url
//     exact: 精确匹配
//     一般情况下， 不可以出现在同一route上 
//     children = { (routerProps) => <组件 { ...routerProps }/> }
//     component: { 组件 }
//     render = { (routerProps) => <组件 { ...routerProps }/> }

// 3. Switch 被包裹起来route 只会匹配第一个匹配到的
// 4. Redirect 重定向
//       from = 从哪里来
//       to = 到哪里去
// 5  NvaLink  导航组件
//      to="string || object"  到哪里去
//          string格式 = '/detail'
//          object格式 = { pathname: '/detail', search: string, hash: string, state: object }
class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <h1>
          <NavLink to="/login">登录</NavLink> 
          <NavLink to={{ pathname: '/detail', search: 'id=110&age=18&size=20', hash: '12345678' }}>详情页</NavLink> 
          <NavLink to="/list">列表</NavLink> 
          <NavLink to="/classify">分类</NavLink> 
        </h1>
        <Switch>
          <Route path="/login" component={ Login } exact></Route>
          <Route path="/detail" render={ (routerProps) => <Detail { ...routerProps }></Detail> } exact></Route>
          <Route path="/list" children={ (routerProps) => <List { ...routerProps }></List>} ></Route>
          <Route path="/classify">
            <Classify></Classify>
          </Route>
          <Redirect from="/" to="/login"></Redirect>
        </Switch>
      </BrowserRouter>
      
    );
  }
}

export default App;
